// 需求1:渲染学生信息(封装成函数)
function initScore(){
  axios({
    url:'/score/list'
  }).then(({data:res})=>{
     if(res.code == 0){
      // 渲染 - res.data是对象类型数据,属性是id
                       //值是对象(name和score)
      // 定义数组
      let arr = []    
      for(let k in res.data){
        // k 代表属性, res.data[k]代表属性值
        arr.push(`
            <tr>
            <th scope="row">${k}</th>
            <td>${res.data[k].name}</td>
            <td data-id="${k}" index="1" class="score">${res.data[k].score[0]}</td>
            <td data-id="${k}" index="2" class="score">${res.data[k].score[1]}</td>
            <td data-id="${k}" index="3" class="score">${res.data[k].score[2]}</td>
            <td data-id="${k}" index="4" class="score">${res.data[k].score[3]}</td>
            <td data-id="${k}" index="5" class="score">${res.data[k].score[4]}</td>
          </tr>
        `)
      }   
       // 赋值
      tbody.innerHTML = arr.join('')          
     }
  })
}
let tbody = document.querySelector('tbody')
initScore()


// 需求2:点击 .score把里面的内容变成input
//  tr都是动态生成的,所以绑定事件需要事件委托

tbody.onclick = function(e){
  // 判断点击的事件源是否是td, 类名为score
  if(!e.target.classList.contains('score')) return

  // bug: 如果得到的是 input这个值,不能进行赋值
  if(!(/^\d{1,3}$/.test(e.target.innerHTML)||e.target.innerHTML == '')) return

  // 赋值input之前,先保存原始数据
  let num = e.target.innerHTML
  // 把里面的内容变成 input
  // 1 创建一个input,方便后面绑定事件
  let input = document.createElement('input')
  input.value = num
  e.target.innerHTML = ''
  e.target.appendChild(input)
  input.focus()

  // 需求3: input失去插入条光标,恢复原始数据
  // 每生成一个input,立刻绑定失去焦点事件
  input.onblur = function(){
    // td,e.target恢复原始数据
    e.target.innerHTML = num
  }

 // 需求4：input中回车发送ajax，修改成绩，重新渲染成绩;
    //    三个事件都是可以，keyup / keydown / input
    input.onkeyup = function (ev) {
      // console.log(ev.key); // Enter
      // console.log(ev.keyCode); // 13
      if (ev.key != 'Enter') return
      // 发送ajax
      axios({
          method: 'post',
          url: '/score/entry',
          // 传递请求体参数
          data: {
              // this是input, 它的父盒子是td，属性都绑定到td上了
              "stu_id": this.parentNode.getAttribute('data-id'), // id
              "batch": this.parentNode.getAttribute('index'), // 第几次修改
              "score": this.value // 成绩
          }
      }).then(({ data: res }) => {
          if (res.code == 0) {
              // 成功提示
              toastr.success('恭喜您，修改成绩成功！')
              // 重新渲染成绩
              initScore()
          }
      })
  }

}



